<#-- 表单样式宏 -->
<#include "/base/common.ftl"/>
<@bootstrap.head >
	<script type="text/javascript" src="<@spring.url "/resources/js/html5.js" />"></script>
	<script type="text/javascript" src="<@spring.url "/resources/js/excanvas.compiled.js" />"></script>
	<script type="text/javascript" src="<@spring.url "/resources/js/jtopo-0.4.8-min.js" />"></script>
	<script type="text/javascript" src="<@spring.url "/resources/jquery/jquery-ui.min.js"/>"></script>
	<script type="text/javascript" src="<@spring.url "/resources/Mydate97/WdatePicker.js" />"></script>
	<link rel="stylesheet" href="<@spring.url "/resources/css/jquery-ui.css" />">
    <style>
     label {margin-top:15px;}
     fieldset {padding:10px; border:0; margin-top:25px}
    </style>
</@bootstrap.head>
<@bootstrap.body>
  <canvas id="jtopo" width="1200px" height="600px" style="background-color:#eeeeee;">当前浏览器不支持Canvas,请更换浏览器</canvas>
  <div id="dialog-form" title="编辑任务" hidden="hidden" style="height:200px;width:400px">
  <form action='' method='post'>
  <fieldset>
  	<p>顺序索引&nbsp&nbsp&nbsp&nbsp
  	<input type="text"  id="orderIndex" name="orderIndex" size="16"  maxlength="32" value="${pmHzbatSchedule.orderIndex}" placeholder="顺序索引" readonly="readonly">
  	<p>计划名称&nbsp&nbsp&nbsp&nbsp
  	<input type="text"  id="scheduleName"  name="scheduleName" size="32"  maxlength="64" value="${pmHzbatSchedule.scheduleName}" placeholder="计划名称">
  	</input></p>
  	<p>计划描述&nbsp&nbsp&nbsp&nbsp
  	<input type="text" id="scheduleDesc"  name="scheduleDesc" size="32"  maxlength="64" value="${pmHzbatSchedule.scheduleDesc}" placeholder="计划描述">
  	</input></p>
  	<p>开始执行日期时间&nbsp&nbsp&nbsp&nbsp
  	<input type="text" class="Wdate" id="beginDatetime"  name="beginDatetime" size="20"  maxlength="40" value="${pmHzbatSchedule.beginDatetime}" placeholder="开始执行日期时间" onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
  	</input></p>
  	<p>结束执行日期时间&nbsp&nbsp&nbsp&nbsp
  	<input type="text" class="Wdate"  id="endDatetime"  name="endDatetime" size="20"  maxlength="40" value="${pmHzbatSchedule.endDatetime}" placeholder="结束执行日期时间" onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
  	</input></p>
  	<p>进度&nbsp&nbsp&nbsp&nbsp
  	<input type="text"  id="progress"   name="progress" size="16"  maxlength="32" value="${pmHzbatSchedule.progress}" placeholder="进度">
  	</input><font id="getfont" color="red" size="0.5" face="微软雅黑" hidden="hidden">请输入数字</font></p>
  </fieldset>
  </form>
   </div>
</@bootstrap.body>
<script>

	var jtopo = document.getElementById("jtopo");
	var stage = new JTopo.Stage(jtopo);
	var scene = new JTopo.Scene(stage);
	
    var beginNode = addNode(400,50,"开始");
	var batche1 = addNode(150,150,"batche1");
	var batche2 = addNode(350,150,"batche2");
	var batche3 = addNode(550,150,"batche3");
	var batche4 = addNode(400,250,"batche4");
	var endNode = addNode(400,350,"结束");

	addLink(beginNode,batche1,"");
	addLink(beginNode,batche2,"");
	addLink(beginNode,batche3,"");
	addLink(batche2,batche4,"");
	addLink(batche3,batche4,"");
	addLink(batche1,endNode,"");
	addLink(batche4,endNode,"");
     
	  function addNode(_x,_y,_text){
			var node = new JTopo.Node(_text);
			node.textPosition = "Middle_Center" ;
			node.setLocation(_x,_y);
			node.setSize(100,50);
			node.textOffsetY = -4 ;
			node.borderRadius = 5 ;	
			node.borderColor = "243,139,179" ;
			node._data={"_text":_text};
			var color = JTopo.util.randomColor();
			console.log(color+"==========");
			node.fillColor = "80,165,26";
			node.dbclick(function(e){
				$("#dialog-form").dialog({
				//高亮显示
				modal:true,
				//按钮
				buttons:{
				"确定":function(){
				//数字验证
				var progress = $("#progress").val();
				if(checkNum(progress)=="-1"){
				$("#getfont").show();
				return;
				}else{
				$("#getfont").hide();
				}
				
				var schedual={
				orderIndex:$("#orderIndex").val(),
				scheduleName:$("#scheduleName").val(),
				scheduleDesc:$("#scheduleDesc").val(),
				beginDatetime:$("#beginDatetime").val(),
				endDatetime:$("#endDatetime").val(),
				progress:progress
				};
			//	console.log($("form").serialize())
				$.ajax({
					url:"<@spring.url "/pmHzbatSchedule/update" />",
					type:"post",
					data:schedual,
 		 			success:function(result){
 		 			alert("修改成功！");
 		 			$("#dialog-form").dialog('close');
 		 			parent.FlushDynamicMenu();  //刷新菜单		 						
 		 			}
				});
				},
				"取消":function(){$(this).dialog('close');}
				},
				//显示方式
				show:{
				effect:"blind",
				duration:500 
				},
				width:400
				
				})
			});
			scene.add(node);
			console.log("node:"+_text);
			console.log(node);
			return node ;
	  }

      function addLink(_node1,_node2,_text){
	  		var link = new JTopo.Link(_node1,_node2,_text);
			link.lineWidth = 8 ;
			link.arrowsRadius = 10 ;
			link.dbclick(function(e){
			    //link.nodeZ = batche4;
				console.log(link);
			});		 
			scene.add(link);
			return link ;
	  }
	  
	  
	  
	//数字验证		
	function checkNum(str){
		var reg = new RegExp("^[0-9]*$");
		if(!reg.test(str)){
			return -1;
		}
		return 0;
	}

</script>
